<template>
  <div class="dashboard-container">
    <div id="main" style="width: 100%; height: 500px"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import ArticleAPI from '@/api/system/article.api'


onMounted(() => {
  ArticleAPI.getCateArticleCount().then(data => {
    // 过滤分类数组和分类总文章数组
    // 分类数组
    let categoryArr = data.map(item => item.category_name)
    // 分类总文章数组
    let categoryArrCount = data.map(item => item.count)

    // 初始化echarts
    initEcharts(categoryArr, categoryArrCount)
  })

})

const initEcharts = (data1, data2) => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById("main"));

  // 指定图表的配置项和数据 https://echarts.apache.org/zh/option.html#title.text
  const option = {
    title: {
      text: "文章的数量统计",
    },
    tooltip: {},
    legend: {
      data: ["文章数量"],
    },
    xAxis: {
      // 分类数组
      data: data1,
    },
    yAxis: {},
    series: [
      {
        name: "篇数",
        type: "bar",
        // 分类总文章数数组
        data: data2,
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
</script>

<style scoped></style>
